<template>
  <div class="container">
    <el-dialog title="更改工作人员" :visible.sync="replaceModalShow" width="550px" :before-close="cancleBtn">
      <div class="container_examine">
        <div>
          <el-form ref="ruleForm" label-position="top" :model="formInline" label-width="80px">
            <el-form-item label="机构部门" prop="unit">
              <!--<el-select v-model="formInline.unit" placeholder="请选择机构部门">-->
              <!--<el-option v-for="item in unitList " :key="item.id" :label="item.department" :value="item.id" />-->
              <!--</el-select>-->
              <el-cascader
                style="width: 100%"
                v-model="formInline.unit"
                :options="unitList"
                ref="myCascader"
                :props="{label:'name',value:'code'}"
                @change="handleChange"></el-cascader>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancleBtn">取消</el-button>
        <el-button size="small" type="primary" @click="saveBtn">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getStructureList, changeUnitPeople } from '../api'
  export default {
    props: ['applyId', 'department','replaceModalShow'],
    data() {
      return {
        formInline: {
          unit: '',
          ryid: '',
          department: ''
        },
        unitList: [],
        userInfo: {},
        app_id: '',
        depart_ment: ''
      }
    },
    watch: {
      applyId(curVal) {
        this.app_id = curVal
      },
      department(curVal) {
        this.depart_ment = curVal
      }
    },
    created() {
      this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.getStructureList()
    },
    methods: {
      // 获取机构列表
      getStructureList() {
        getStructureList('派发').then(res => {
          this.unitList = res.data.data.sjlist;
        })
      },
      saveBtn() {
        if(this.formInline.department){
          if (this.depart_ment !== this.formInline.department) {
            const data = {
              ryid:this.formInline.ryid,
              app_id:this.app_id,
              department_id:this.formInline.unit[this.formInline.unit.length - 2],
              department:this.formInline.department,
              name:this.userInfo.nickName,
              account:this.userInfo.username,
            }
            changeUnitPeople(data).then(res => {
              // this.$store.state.replaceModalShow = false
              this.$message({
                type: 'success',
                message: '更换成功'
              })
              this.formInline.unit = ''
              this.formInline.department =''
              this.$emit('replaceFun', true)
            })
          } else {
            this.$message.warning('已派发人员不能与更改人员是同一人')
          }
        } else {
          this.$message.warning('机构部门不能为空')
        }

      },
      handleChange(value) {
        let labelName = this.$refs['myCascader'].getCheckedNodes()[0].pathLabels;
        this.formInline.ryid = value[value.length-1];
        this.formInline.department = labelName[labelName.length-1];
      },
      cancleBtn() {
        console.log(this.formInline.unit)
        this.formInline.unit = ''
        this.formInline.department =''
        this.$emit('replaceFun', false)
        // this.$store.state.replaceModalShow = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
    ::v-deep .el-dialog {
      max-height: 80vh;
      overflow: auto;
    }
    ::v-deep .el-dialog__body {
      margin-top: 25px;
      padding:30px 20px 30px 30px;
    }
    ::v-deep .el-dialog__header {
      /*background: #3489ff;*/
      position: fixed;
      width: 550px;
      z-index: 99;
      /*.el-dialog__title {*/
      /*color: #ffffff;*/
      /*}*/
      .el-dialog__headerbtn {
        top: 14px !important;
        cursor: pointer;
        /*i {*/
        /*color: #ffffff;*/
        /*}*/
      }
    }
    .container_examine{
      margin-top: 20px;
      .el-select{
        width: 90%;
      }
      .el-form--inline .el-form-item{
        width: 48%;
        margin-bottom:12px;
      }
      ::v-deep .el-select,
      ::v-deep .el-date-editor{
        width: 100%;
      }
      ::v-deep .el-form-item__label{
        font-weight: normal;
        line-height:20px;
      }

    }
  }

</style>
